/**
 * Vite构建配置文件
 * 配置项目的构建选项、插件和别名等
 */

// 从node:url模块中导入URL处理函数
import { fileURLToPath, URL } from 'node:url'

// 从vite中导入配置定义函数
import { defineConfig } from 'vite'

// 导入Vue插件
import vue from '@vitejs/plugin-vue'

// 导入Vue DevTools插件，用于开发调试
import vueDevTools from 'vite-plugin-vue-devtools'

// 导入自动导入插件，用于自动导入常用API
import AutoImport from 'unplugin-auto-import/vite'

// 导入组件自动导入插件，用于自动导入组件
import Components from 'unplugin-vue-components/vite'

// 导入Element Plus解析器，用于解析Element Plus组件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

/**
 * 导出Vite配置
 * https://vite.dev/config/
 */
export default defineConfig({
  // 插件配置
  plugins: [
    // Vue官方插件，用于处理Vue单文件组件
    vue(),

    // Vue DevTools插件，提供开发调试工具
    //vueDevTools(),

    // 自动导入插件配置
    AutoImport({
      // 自动导入的模块
      imports: [
        'vue',        // Vue核心API
        'vue-router', // Vue Router API
        'pinia'       // Pinia状态管理API
      ],
      // 组件解析器
      resolvers: [
        ElementPlusResolver() // Element Plus组件解析器
      ],
      // 生成类型声明文件
      dts: 'src/auto-imports.d.ts'
    }),

    // 组件自动导入插件配置
    Components({
      // 组件目录
      dirs: ['src/views', 'src/components'],

      // 组件解析器
      resolvers: [
        ElementPlusResolver({
          importStyle: 'sass' // 如果使用 SCSS 样式
        })
      ],

      // 添加 Element Plus 图标自动引入支持
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
      // 生成类型声明文件
      dts: 'src/components.d.ts'
    })
  ],

  // 路径解析配置
  resolve: {
    // 别名配置
    alias: {
      // 设置@别名指向src目录
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})
